<template>
  <div class="main">
    <div class="top">
      <div class="top__title mt-2">损伤情况列表</div>
    </div>
    <div class="content flex-center">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        height="240"
      >
        <el-table-column type="selection" />
        <el-table-column
          prop="id"
          label="损伤ID"
        />
        <el-table-column
          prop="date"
          label="损伤部位"
        />
        <el-table-column
          prop="name"
          label="损伤等级"
        />
        <el-table-column
          prop="time"
          label="尺寸"
        />
        <el-table-column
          prop="id"
          label="图片"
        >
          <template #default>
            <el-image
              src="/img/222.jpg"
              style="height: 60px; width: 60px"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="repair"
          label="修复策略"
        />
      </el-table>
      <div class="w-full h-10 flex-right">
        <el-button
          type="primary"
          @click="clickExport"
          >导出</el-button
        >
        <el-button type="danger">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const tableData = [
  {
    id: "开裂_1",
    date: "翼尖下缘",
    name: "严重",
    time: "5cm",
    repair: "修复策略1",
  },
  {
    id: "凹陷_2",
    date: "翼尖下缘",
    name: "损伤数量2",
    time: "20cm",
    repair: "修复策略2",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
];
const clickExport = () => {
  navigateTo("/user/detail-1/");
};
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block("main") {
  flex-direction: column;
  @apply w-full h-full;
}

@include block("top") {
  width: 100%;
  height: 10%;
  @apply flex flex-col;

  @include element("title") {
    width: 100%;
    @apply text-2xl;
  }

  @include element("action") {
    width: 100%;
    flex: 1;
    // overflow: hidden;
  }
}

@include block("content") {
  width: 100%;
  height: 90%;
  @apply flex-col;
}

:deep(.el-table th) {
  background-color: rgb(245, 247, 250);
}
</style>
